<template>
  <a-form
          :model="ruleForm"
          ref="ruleForm"
          v-bind="layout"
          :rules="rules"
          @finish="handleFinish">
    <a-form-item label="实验名称" name="experiment_name">
      <a-input v-model:value="ruleForm.experiment_name" />
    </a-form-item>
    <a-form-item label="课题名称" name="subject_name">
      <a-select
        v-model:value="ruleForm.subject_name"
        style="width: 120px"
        ref="select"
      >
        <a-select-option
          v-for="item in subjectNameSelectionOptions"
          :key="item.url"
        >
          {{ item.label }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="实验编号" name="experiment_num">
      <a-input v-model:value="ruleForm.experiment_num" />
    </a-form-item>
    <a-form-item label="实验人员" name="experimenter">
      <a-input v-model:value="ruleForm.experimenter" />
    </a-form-item>
    <!-- <a-form-item label="审核人" name="experiment_reviewer">
      <a-select
        v-model:value="ruleForm.experiment_reviewer"
        style="width: 120px"
        ref="select"
      >
        <a-select-option
          v-for="item in experimentReviewerSelectionOptions"
          :key="item.url"
        >
          {{ item.label }}
        </a-select-option>
      </a-select>
    </a-form-item> -->
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" :loading="submitting" html-type="submit">
        {{ submitting ? '提交中' : '确定' }}
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { message } from 'ant-design-vue'
export default {
  name: 'AddOrEditExperimentInfo',
  props: ['url'],
  emits: ['operate-success', 'operate-failed'],

  data() {
    let validateExperimentName = async (rule, value) => {
      if (value === "") {
        return Promise.reject("请填写实验名称");
      }
    };
    return {
      ruleForm: {
        experiment_name: '',
        subject_name: '',
        experiment_num: '',
        experimenter: '',
        // experiment_reviewer: '',
      },
      rules: {
        experiment_name: [
          {
            validator: validateExperimentName,
            trigger: "change",
            required: true,
            whitespace: true,
          },
      ],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      submitting: false,
      subjectNameSelectionOptions: [],
      // experimentReviewerSelectionOptions: [],
      headers: {
        authorization: 'authorization-text',
      },
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    fetch() {
      this.subjectNameSelectionOptions = []
      // this.experimentReviewerSelectionOptions = []
      // this.axios.get('/user_management/users').then((res) => {
      //   const data = res.data
      //   for (let i = 0; i < data.length; ++i) {
      //     this.experimentReviewerSelectionOptions.push({
      //       url: data[i].url,
      //       label: data[i].username,
      //     })
      //   }
      // })
      this.axios
        .get('/subject_management/subjects')
        .then((res) => {
          const data = res.data
          for (let i = 0; i < data.length; ++i) {
            this.subjectNameSelectionOptions.push({
              url: data[i].url,
              label: data[i].subject_name,
            })
          }
          this.ruleForm.subject_name = data.length === 0 ? '' : data[0].url
          if (this.url !== '') {
            this.axios
              .get(this.url)
              .then((res) => {
                const data = res.data
                this.ruleForm.experiment_name = data.experiment_name
                this.ruleForm.subject_name = data.subject_name
                this.ruleForm.experiment_num = data.experiment_num
                this.ruleForm.experimenter = data.experimenter
                this.ruleForm.experiment_reviewer = data.experiment_reviewer
              })
              .catch((error) => {
                console.log('Error', error.message)
              })
          }
        })
        .catch((error) => {
          console.log('Error', error.message)
          this.ruleForm.subject_name = ''
        })
    },
    handleFinish(values) {
      this.submitting = true
      const formData = new FormData()
      formData.append('experiment_name', values.experiment_name)
      formData.append('subject_name', values.subject_name)
      formData.append('experiment_num', values.experiment_num)
      formData.append('experimenter', values.experimenter)
      // formData.append('experiment_reviewer', values.experiment_reviewer)
      if (this.url !== '') {
        this.axios
          .put(this.url, formData)
          .then(() => {
            this.submitting = false
            message.success('修改成功！')
            this.$emit('operate-success')
          })
          .catch((error) => {
            this.submitting = false
            message.error('修改失败！')
            this.$emit('operate-failed')
            console.log('Error', error.message)
          })
      } else {
        this.axios
          .post('/experiment_management/experiment_information/', formData)
          .then(() => {
            this.submitting = false
            message.success('添加成功！')
            this.$emit('operate-success')
          })
          .catch((error) => {
            this.submitting = false
            message.error('添加失败！')
            this.$emit('operate-failed')
            console.log('Error', error.message)
          })
      }
    },
  },
}
</script>
